<script>
export default {
  data() {
    return {
      showBottomLine: false,
      displayable: false, // 是否显示禁用
      // 查询表单
      formData: {
        c_mk_dt_s: '1949-10-01',
        c_mk_dt_e: '',
        c_provider: '',
        c_id: '',
        c_id1: '',
        c_id2: '',
        c_id3: '',
        c_id4: '',
        c_id5: '',
        c_id6: '',
        c_num1: '',
        c_num2: '',
        c_num3: '',
        c_num4: '',
        c_num5: '',
        c_num6: '',
        c_password: '',  //密码
        c_password1: '',  //密码
        c_switch: false,
        c_switch2: false,
        c_switch3: false,
        c_switch4: false,
        time1: '',
        time2: '',
        date1: '',
        date2: '',
        date3: '',
        date4: '',
        c_textarea1: '',
        c_textarea2: '',
        c_textarea3: '',
        c_textarea4: '',
        c_images: [],  //图片
      },
      dateList: [],
      c_status: '0',
      //复选框数据
      c_affect_fields: 'c_price,c_price_mem,c_wprice',
      effectPropsItems: [
        { text: '最低售价', value: 'c_min_price', checked: false },
        { text: '建议售价', value: 'c_advice_price', checked: false },
        { text: '售价', value: 'c_price', checked: true },
        { text: '会员价', value: 'c_price_mem', checked: true },
        { text: '批发价', value: 'c_wprice', checked: true }
      ],
      //单选框数据
      batchChangePrice: {
        c_field: 'P',
        c_basic_type: 'OP',
        c_discount: 100,
        c_method: '1',
        c_precision: 'f',
        c_affect: 'A'
      },
      precisionList: [
        {
          text: "分",
          value: "f"
        },
        {
          text: "角",
          value: "j"
        },
        {
          text: "元",
          value: "y"
        },
        {
          text: "10元",
          value: "s"
        }
      ],
      //下拉框数据
      selectorValue: '',
      selectorList: [
        { value: '0', text: "篮球" },
        { value: '1', text: "足球" },
        { value: '2', text: "游泳" },
      ],
      selectorValue1: '',
      selectorList1: [
        { value: '0', text: "篮球" },
        { value: '1', text: "足球" },
        { value: '2', text: "游泳" },
      ],
      selectorValue2: '',
      selectorList2: [
        { value: '0', text: "篮球" },
        { value: '1', text: "足球" },
        { value: '2', text: "游泳" },
        { value: '3', text: "乒乓球" },
        { value: '4', text: "羽毛球" },
      ],
    }
  },
  methods: {
    buttonClick(localValue) {
      console.log('=======localValue: ', localValue);
    },
    consoleData(e) {
      console.log('===========consoleData: ', e);
      console.log('==========batchChangePrice: ', this.batchChangePrice);
      console.log('==========c_affect_fields: ', this.c_affect_fields);
      console.log('==========selectorValue: ', this.selectorValue);
      console.log('==========selectorValue1: ', this.selectorValue1);
      console.log('==========selectorValue2: ', this.selectorValue2);
    },
    // 图标点击事件
    scan(e) {
      console.log('扫码: ', e);
    },
    clear(e) {
      console.log('清除: ', e);
      switch (e) {
        case 'date1':
          this.formData.date1 = '';
          break;
        case 'date2':
          this.formData.date2 = '';
          break;
        case 'password':
          this.formData.c_password = '';
          break;
        default:
          this.formData.c_id2 = '';
      }
    }
  },
}
</script>

<route lang="json">{
  "style": {
    "navigationBarTitleText": "CardInput"
  }
}</route>

<template>
  <view class="main">
    <view class="title-text">右对齐</view>
    <view class="title-view">
      <text class="title-text">基本信息</text>
<!--      <text>{{ formData.c_id1 }}</text>-->
<!--      <text>{{ formData.c_id2 }}</text>-->
<!--      <text>{{ formData.c_id3 }}</text>-->
    </view>
    <!--单行输入框-->
    <eui-card-input v-model="formData.c_id1" title="商品条码" placeholder="请输入商品条码" type="text" :displayable="displayable"
       id="c_id1" />
    <eui-card-input v-model="formData.c_id2" title="商品编码" placeholder="请输入商品编码" type="text" :displayable="displayable"
      :required="true" id="c_id2" />
    <eui-card-input v-model="formData.c_id3" title="商品名称" placeholder="请输入" type="text" :displayable="displayable"
      required alignType="right" id="c_id3" />
    <!--数量2-->
    <eui-card-input v-model="formData.c_num1" title="数量" placeholder="请输入" type="number" :displayable="displayable"
      required :clearable="true" maxlength="9" id="c_num1"  />
    <eui-card-input v-model="formData.c_num2" title="数量2" placeholder="请输入" type="number2" :displayable="displayable"
    required :clearable="true" maxlength="9" id="c_num2"  />
    <eui-card-input v-model="formData.c_num3" title="带小数点数字" placeholder="请输入" type="digit" :displayable="displayable"
                    required :clearable="true" maxlength="9" id="c_num3"  />
    <!--密码-->
    <eui-card-input v-model="formData.c_password" title="密码" placeholder="请输入密码" singleTag="password" type="password"
      :displayable="displayable" id="c_password" />
    <!--日期-->
    <eui-card-input v-model="formData.date1" title="开始日期" placeholder="请选择开始日期" type="date" :displayable="displayable"
       singleTag="date1" required alignType="right" />
    <eui-card-input v-model="formData.date2" title="结束日期时间" placeholder="请选择结束日期时间" type="datetime" dateReturnType="YYYY-MM-DD HH:mm"
      :displayable="displayable"  singleTag="date2" required />
    <!--时间-->
    <eui-card-input v-model="formData.time1" title="时间" placeholder="请选择时间" type="time" :displayable="displayable"
                    singleTag="time1" required alignType="right" />
    <!--多行输入框-->
    <eui-card-input v-model="formData.c_textarea1" title="多行备注" placeholder="请输入内容" type="textarea" :displayable="displayable"
      maxlength="150"  id="c_textarea1" radius="10"/>
    <eui-card-input v-model="formData.c_textarea2" title="复检说明" placeholder="描述复检的结果" type="textarea"
      :displayable="displayable" maxlength="100" id="c_textarea2" />
    <!--开关-->
    <eui-card-input v-model="formData.c_switch" title="是否称重" type="switch" :displayable="displayable" required />
    <eui-card-input v-model="formData.c_switch2" title="是否称重" type="switch" :displayable="displayable" />
    <!--单选-->
    <eui-card-input v-model="batchChangePrice.c_precision" :range="precisionList" title="精确度" type="radio"
      @buttonClick="buttonClick" :displayable="displayable" required titleWidth="120" />
    <!--复选-->
    <eui-card-input v-model="c_affect_fields" :range="effectPropsItems" title="类型" type="multi"
      @buttonClick="buttonClick" :displayable="displayable" required titleWidth="120" />
    <!--下拉框-->
    <eui-card-input v-model="selectorValue" :range="selectorList" title="下拉框" rightIconType="right" type="selector"
      :displayable="displayable" placeholder="请选择" alignType="right" required />
    <!--下拉框(单选)-->
    <eui-card-input v-model="selectorValue1" :range="selectorList1" title="下拉框单选" rightIconType="right" type="selectorRadio"
                    :displayable="displayable" placeholder="请选择" alignType="right" required />
    <!--下拉框(多选)-->
    <eui-card-input v-model="selectorValue2" :range="selectorList2" title="下拉框多选" rightIconType="right" type="selectorMulti"
                    :displayable="displayable" placeholder="请选择" alignType="right" required :showBottomLine="false" />

    <view class="title-text">左对齐</view>
    <view class="title-view">
      <text class="title-text">基本信息</text>
    </view>
    <!--单行输入框-->
    <eui-card-input v-model="formData.c_id4" title="商品条码" placeholder="请输入商品条码" type="text" :displayable="displayable"
                    rightIconType="scan" @iconClick="scan" align-type="left" id="c_id4" />
    <eui-card-input v-model="formData.c_id5" title="商品编码" placeholder="请输入商品编码" type="text" :displayable="displayable"
                    :required="true" rightIconType="clear" @iconClick="clear" align-type="left"  id="c_id5" />
    <eui-card-input v-model="formData.c_id6" title="商品名称" placeholder="请输入" type="text" :displayable="displayable"
                    required alignType="left" id="c_id6" />
    <!--数量2-->
    <eui-card-input v-model="formData.c_num4" title="数量" placeholder="请输入" type="number" :displayable="displayable"
                    required :clearable="true" maxlength="9" id="c_num4" align-type="left" />
    <eui-card-input v-model="formData.c_num5" title="数量2" placeholder="请输入" type="number2" :displayable="displayable"
                    required :clearable="true" maxlength="9" id="c_num5" align-type="left" />
    <eui-card-input v-model="formData.c_num6" title="带小数点数字" placeholder="请输入" type="digit" :displayable="displayable"
                    required :clearable="true" maxlength="9" id="c_num6" align-type="left" />
    <!--密码-->
    <eui-card-input v-model="formData.c_password1" title="密码" placeholder="请输入密码" singleTag="password" type="password"
                    :displayable="displayable" rightIconType="clear" @iconClick="clear" id="c_password1" align-type="left" />
    <!--日期-->
    <eui-card-input v-model="formData.date3" title="开始日期" placeholder="请选择开始日期" type="date" :displayable="displayable"
                    rightIconType="clear" @iconClick="clear" singleTag="date3" required alignType="left" />
    <eui-card-input v-model="formData.date4" title="结束日期" placeholder="请选择结束日期" type="date" dateReturnType="date"
                    :displayable="displayable" rightIconType="clear" @iconClick="clear" singleTag="date4" align-type="left" required />
    <!--时间-->
    <eui-card-input v-model="formData.time2" title="时间" placeholder="请选择时间" type="time" :displayable="displayable"
                    singleTag="time2" required alignType="left" />
    <!--多行输入框-->
    <eui-card-input v-model="formData.c_textarea3" title="多行备注" placeholder="请输入内容" type="textarea" :displayable="displayable"
                    maxlength="150"  id="c_textarea3" />
    <eui-card-input v-model="formData.c_textarea4" title="复检说明" placeholder="描述复检的结果" type="textarea"
                    :displayable="displayable" maxlength="100" id="c_textarea4" />
    <!--开关-->
    <eui-card-input v-model="formData.c_switch" title="是否称重" type="switch" :displayable="displayable" required align-type="left" />
    <eui-card-input v-model="formData.c_switch2" title="是否称重" type="switch" :displayable="displayable" align-type="left" />
    <!--下拉框-->
    <eui-card-input v-model="selectorValue" :range="selectorList" title="下拉框" rightIconType="right" type="selector"
                    :displayable="displayable" placeholder="请选择" alignType="left" required />
    <!--下拉框(单选)-->
    <eui-card-input v-model="selectorValue1" :range="selectorList1" title="下拉框单选" rightIconType="right" type="selectorRadio"
                    :displayable="displayable" placeholder="请选择" alignType="left" required />
    <!--下拉框(多选)-->
    <eui-card-input v-model="selectorValue2" :range="selectorList2" title="下拉框多选" rightIconType="right" type="selectorMulti"
                    :displayable="displayable" placeholder="请选择" alignType="right" required align-type="left" :showBottomLine="false" />

    <!--图片上传-->
    <view class="title-view" :style="{ marginTop: '66rpx', borderRadius: '20rpx', overflow: 'hidden', borderBottom: 0 }">
      <text class="title-text" style="margin: 28rpx 28rpx 0 28rpx">图片上传</text>
      <eui-card-input imgLimit="2" v-model="formData.c_images" type="image" />
    </view>
    <!--数据输出-->
    <eui-button title="确定" @buttonClick="consoleData" />
  </view>
</template>

<style lang="scss">
.main {
  width: calc(100% - 40rpx);
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: #F4F4F4;
  padding: 20rpx;
}

.title-view {
  width: 710rpx;
  height: auto;
  border-bottom: 1px solid #EEEEEE;
  background: #FFFFFF;
  display: flex;
  //align-items: center;
  box-sizing: border-box;
  border-radius: 20rpx 20rpx 0 0;
  flex-direction: column;
}

.title-text {
  font-weight: 500;
  font-size: 30rpx;
  color: #000000;
  line-height: 42rpx;
  text-align: left;
  font-style: normal;
  margin: 28rpx;
}
</style>
